<template>
  <el-drawer custom-class="zw_drawer" v-model.sync="drawer" :direction="direction" :size="width" @close="handleClose" @open="handleOpen">
    <template #title>
      <div class="drawer_tit">
        {{ title }}
      </div>
    </template>
    <template #default>
      <div class="content">
        <el-scrollbar class="main"><slot></slot></el-scrollbar>
      </div>
    </template>
    <template #footer>
      <el-button type="primary" v-show="isShow" @click="confirmClick">{{ drawerMsg }}</el-button>
    </template>
  </el-drawer>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const drawer = ref(false)
const title = ref('我是标题2')
const direction = ref('rtl')
const width = ref(425)
const drawerMsg = ref('提交')
const isShow = ref(true)
const emit = defineEmits({
  submit: null,
  close: null
})
const handleClose = () => {
  drawer.value = false
  emit('close')
}
const handleOpen = () => {
  drawer.value = true
}
const confirmClick = () => {
  emit('submit')
}
defineExpose({
  drawer,
  width,
  drawerMsg,
  title,
  isShow
})
</script>
<style lang="scss">
.zw_drawer {
  .drawer_tit {
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #33302d;
    font-size: 16px;
  }
  .content {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    .main {
      position: absolute;
      height: calc(100% - 60px);
      width: 100%;
      top: 0;
      bottom: 60px;
      .el-scrollbar__view {
        height: 100%;
      }
    }
  }
}
</style>
